<!doctype html>
<html>
<head>

  <title>early owner-root</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">

</head>
<body>


  <dom-module id="x-owner-root">
    <template>where am I?</template>
    <script>
      Polymer({
        is: 'x-owner-root',

        properties: {
          nug: {type: String, observer: '_nugChanged'}
        },

        _nugChanged: function() {
          console.log(this.localName, Polymer.dom(this).getOwnerRoot());
        }

        
      });
    </script>
  </dom-module>

  <dom-module id="x-test">
    <template>
      <template is="dom-if" if="{{foo}}">
        <x-owner-root nug="foo"></x-owner-root>
      </template>
    </template>
    <script>
      Polymer({
        is: 'x-test',
        attached: function() {
          this.foo = true;
          Polymer.dom.flush();
          var e = Polymer.dom(this.root).querySelector('x-owner-root');
          var r = e && Polymer.dom(e).getOwnerRoot();
          console.log(e, r, r === this.root);
        }
      });
    </script>
  </dom-module>

  <x-test></x-test>

</body>
</html>
